<template>
  <el-menu
    class="el-menu-vertical-demo"
    background-color="#fff"
    text-color="#cecece"
    router
    mode="horizontal"
    :default-active="route.path"
  >
    <el-menu-item index="/home">
      <span>首页</span>
    </el-menu-item>
     <el-sub-menu index="/a" >
          <template #title>
            云桌面</template
          >
          <el-menu-item index="/cloudD">
            <el-icon><lightning /></el-icon>
            <span>云桌面</span>
          </el-menu-item>
          <el-menu-item index="/cloudB">
           <el-icon><aim /></el-icon>
            <span>云浏览器</span>
          </el-menu-item>
        </el-sub-menu>
    <el-menu-item index="/stytem">
      <span>云文件</span>
    </el-menu-item>
    <el-menu-item index="/cloudF">
      <span>云架构</span>
    </el-menu-item>
  </el-menu>
</template>
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
</script>
<style lang="less" scoped>
.el-menu {
  padding-left: 35px;
  flex: 1;
 /deep/ .el-sub-menu{
    .el-sub-menu__title{
       color: black !important;
    }
  }
  .el-menu-item {
    margin: 0 15px;
    color: black;
  }
}
</style>
